/**
* 选择供应商
*/
<template>
    <vp-dialog ref="editDialogRef" :span="4">
        <template #title>
            <vp-label zh="选择供应商" en="" align="left" />
        </template>
        <vp-card class="mb5">
            <el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList"
                label-width="120px">
                <vp-search-row :show-more="showMore">
                    <vp-search-col>
                        <el-form-item prop="gysbm">
                            <template #label><vp-label zh="编号" en="" /></template>
                            <el-input v-model="searchForm.gysbm" v-trim></el-input>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col>
                        <el-form-item prop="gysmc">
                            <template #label><vp-label zh="名称" en="Name" /></template>
                            <el-input v-model="searchForm.gysmc" v-trim></el-input>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col>
                        <el-form-item prop="tag">
                            <template #label><vp-label zh="标签" en="" /></template>
                            <VpDictSelect :lxid="502" :selectedId="searchForm.tag"
                                @dictSelected="obj => { searchForm.tag = obj; }" style="width:100%">
                            </VpDictSelect>
                        </el-form-item>
                    </vp-search-col>
                    <vp-search-col>
                        <el-form-item :label-width="120" prop="showYx">
                            <el-checkbox v-model="searchForm.showYx" :true-value="10" :false-value="0">
                                <vp-label zh="仅显示有效" en="" />
                            </el-checkbox>
                        </el-form-item>
                    </vp-search-col>

                    <vp-search-col btn-col>
                        <vp-btn-search :loading="loading" @click="loadDataList" />
                        <vp-btn-reset @click="handleSearchReset" />
                        <vp-btn-more @change="showMore = $event" />
                    </vp-search-col>
                </vp-search-row>
            </el-form>
        </vp-card>
        <vp-card v-loading="loading">
            <el-table :data="tableData" ref="tableRef" highlight-current-row stripe border style="width: 100%"
                row-key="demandDetailId" @selection-change="handleSelectionChange" @row-click="handleRowClick">
                <el-table-column type="index" align="center" label="#">
                </el-table-column>
                <el-table-column prop="gysbm" show-overflow width="130">
                    <template #header><vp-label zh="编号" en="" /></template>
                    <template #default="scope">
                        {{ scope.row.gysbm }}
                    </template>
                </el-table-column>
                <el-table-column prop="zwms" show-overflow>
                    <template #header><vp-label zh="名称" en="" /></template>
                    <template #default="{ row }">
                        中:{{ row.gysmc }} 英:{{ row.gysywmc }}
                    </template>
                </el-table-column>
                <el-table-column prop="jb" show-overflow width="90">
                    <template #header><vp-label zh="级别" en="" /></template>
                </el-table-column>
                <el-table-column prop="bqmc" show-overflow>
                    <template #header><vp-label zh="标签" en="" /></template>
                </el-table-column>
                <el-table-column prop="yxqJs" show-overflow width="100">
                    <template #header><vp-label zh="有效期" en="" /></template>
                </el-table-column>
            </el-table>
            <el-pagination background class="mt5" layout="prev, pager, next, total" :total="page.total"
                v-model:currentPage="page.pageNum" v-model:pageSize="page.pageSize" :hide-on-single-page="false">
            </el-pagination>
        </vp-card>
        <template #footer>
            <vp-btn-empty @click="handleClear" />
            <vp-btn-confirm @click="handleSave" />
        </template>
    </vp-dialog>
</template>

<script setup lang="ts" name="ChooseQualitySupplierListDialog">
import { reactive, ref, watch, computed } from 'vue';
import { DIALOG_PAGE } from '/@/utils/page';
import request from '/@/utils/request';
import VpDictSelect from '/@/components/vp/dict/VpDictSelect.vue';


const searchForm = ref({
    gysbm: '',
    gysmc: "",
    tag: "",
    showYx: 10,
});

const page = reactive({
    ...DIALOG_PAGE,
});

const tableData = ref([]);
const loading = ref(false);
const callback = ref((data: any) => { });


const tableRef = ref();
const editDialogRef = ref();
const searchFormRef = ref();
const showMore = ref(false);

//选择的数据
const singleSelection = ref();

const handleOpen = (param: any) => {
    editDialogRef.value.handleOpen();

    singleSelection.value = null;

    if (param.callback && typeof param.callback === "function") {
        callback.value = param.callback;
    }
    loadDataList();
}

watch(() => page.pageNum, () => {
    loadDataList();
})

const loadDataList = () => {
    loading.value = true;
    request.get('/quality/supplier/queryDailogList', {
        params: {
            ...searchForm.value,
            ...page,
        }
    }).then(res => {
        tableData.value = res?.data?.list || [];
        page.total = res?.data?.total || 0;
        page.pageNum = res?.data?.pageNum || 1;
    }).finally(() => {
        loading.value = false;
    })
}

const handleSearchReset = () => {
    searchFormRef.value.resetFields();
}

const handleRowClick = (row: any) => {
    tableRef.value.clearSelection();
    tableRef.value.toggleRowSelection(row, true);
}


const handleSelectionChange = (val: any) => {
    singleSelection.value = val.length > 0 ? val[val.length - 1] : null;

}

const handleSave = () => {
    if (loading.value) {
        return;
    }
    callback.value(singleSelection.value);
    editDialogRef.value.handleClose();
}
const handleClear = () => {
    if (loading.value) {
        return;
    }
    callback.value({});
    editDialogRef.value.handleClose();
}

defineExpose({
    handleOpen
})
</script>
